<template>
	<div>
		<div style="width: 70%;margin: 0 auto">
			<el-button type="danger" icon="el-icon-delete" @click="del">删除</el-button>
			<el-input v-model="key" placeholder="标题" style="width: 20%;margin-right: 20px"></el-input>
			<el-button type="primary" icon="el-icon-search" v-on:click="limit_questionnaires" style="height: 40px">搜索
			</el-button>
			<el-button type="primary" style="width: 100px;height: 40px" v-on:click="empty">清空</el-button>
			<el-button type="primary" @click="dialogFormVisible_add = true"
			           style="width: 100px;height: 40px;float: right;margin-right: 30px">添加问卷
			</el-button>
		</div>
		<el-table
				ref="multipleTable"
				:data="tableData"
				tooltip-effect="dark"
				style="width: 80%;margin: 20px auto"
				height="500"
				@selection-change="handleSelectionChange">
			<el-table-column
					type="selection"
					width="55">
			</el-table-column>
			<el-table-column
					prop="text"
					label="标题"
					:show-overflow-tooltip="true"
					width="130">
			</el-table-column>
			<el-table-column
					prop="src"
					label="链接"
					width="470"
					show-overflow-tooltip>
			</el-table-column>
			<el-table-column
					fixed="right"
					label="操作"
					width="200">
				<template slot-scope="scope">
					<el-button @click="dialogFormVisible = true" v-on:click="update_questionnaires(scope.row)"
					           type="primary" icon="el-icon-edit" size="small">修改
					</el-button>
					<el-button @click="delete_questionnaires(scope.row)" type="primary" icon="el-icon-delete"
					           size="small">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
				background
				layout="prev, pager, next"
				:total="total"
				:page-size="page_size"
				:current-page="current_page"
				:hide-on-single-page="true"
				@current-change="limit_questionnaires">
		</el-pagination>
		<el-dialog title="数据更新" :visible.sync="dialogFormVisible" width="50%">
			<el-form :model="form">
				<el-form-item label="标题：" :label-width="formLabelWidth">
					<el-input v-model="form.text" autocomplete="off" style="width: 550px"></el-input>
				</el-form-item>
				<el-form-item label="链接：" :label-width="formLabelWidth">
					<el-input v-model="form.src" autocomplete="off" style="width: 550px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false" v-on:click="update_ok">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="添加数据" :visible.sync="dialogFormVisible_add" width="50%">
			<el-form :model="form">
				<el-form-item label="标题：" :label-width="formLabelWidth">
					<el-input v-model="form_add.text" autocomplete="off" style="width: 550px"></el-input>
				</el-form-item>
				<el-form-item label="链接：" :label-width="formLabelWidth">
					<el-input v-model="form_add.src" autocomplete="off" style="width: 550px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible_add = false" v-on:click="add_ok">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import axios, {post} from "axios";
import {data} from "autoprefixer";


export default {
	name: "QuestionnairesList",
	data() {
		return {
			tableData: [],
			key: "",
			page_size: 7,
			total: 1,
			current_page: 1,
			dialogTableVisible: false,
			dialogFormVisible: false,
			dialogTableVisible_add: false,
			dialogFormVisible_add: false,
			form: {
				id: 0,
				src: "",
				text: "",
			},
			form_add: {
				src: "",
				text: "",
			},
			formLabelWidth: '120px',
			multipleSelection: []
		}
	},
	methods: {
		limit_questionnaires(val) {
			let _this = this;
			axios.post("http://47.108.239.149:9000/api/selectPsychologicalLimit",
					{
						"current": val,
						"size": _this.page_size,
						"key": _this.key,
					}).then(function (response) {
				_this.tableData =response.data.date;
				_this.total = response.data.total;
			})
		},
		empty() {
			this.key = "";
			this.limit_questionnaires(1);
		},
		delete_questionnaire(id) {
			let _this = this;
			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				axios.get("http://47.108.239.149:9000/api/delPsychological?id=" + id).then(function (response) {
					_this.limit_questionnaires(_this.current_page);
				}).catch(function (error) {
					alert("请求不可达")
				});
				_this.empty();
				this.$message({
					type: 'success',
					message: '删除成功!'
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		delete_questionnaires(row) {
			this.delete_questionnaire(row.id)
		},
		update_questionnaires(row) {
			this.form.id = row.id;
			this.form.text = row.text;
			this.form.src = row.src;
		},
		update_ok() {
			let _this = this;
			axios.post("http://47.108.239.149:9000/api/updatePsychological",
					{
						id: _this.form.id,
						text: _this.form.text,
						src: _this.form.src,
					}).then(function (response) {
				if (response.data.code === "200") {
					_this.$message({
						message: '数据更新成功',
						type: 'success'
					});
					_this.limit_questionnaires(_this.current_page);
				} else {
					_this.$message.error('更新失败');
				}
			}).catch(function (response) {
				alert("请求不可达");
			})
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		del() {
			let _this = this;
			let start = true;
			for (let i in this.multipleSelection) {
				axios.get("http://47.108.239.149:9000/api/delPsychological?id=" + _this.multipleSelection[i].id).then(function (response) {
					_this.limit_questionnaires(_this.current_page);
				}).catch(function (response) {
					start = false;
				})
			}
			if (!start) {
				alert("请求不可达");
			}
			_this.empty();
		},
		add_ok() {
			let _this = this;
			axios.post("http://47.108.239.149:9000/api/addPsychological",
					{
						src: _this.form_add.src,
						text: _this.form_add.text,
					}
			).then(function (response) {
				if (response.data.code === "200") {
					_this.$message({
						message: '数据添加成功',
						type: 'success'
					});
					_this.empty_add();
				} else {
					_this.$message.error('添加失败');
				}
			}).catch(function (response) {
				alert("请求不可达");
			})
		},
		empty_add() {
			this.limit_questionnaires(this.current_page);
			this.form_add.src = "";
			this.form_add.text = "";
		},
		cancel() {
			this.dialogFormVisible_add = false;
			this.empty_add();
		}
	},
	mounted() {
		this.limit_questionnaires(1);
	}
}
</script>

<style scoped>
.el-pagination {
	text-align: center;
	margin-top: 20px;
}
</style>

